<template>
  <transition name="fadeIn">
    <div class="toastBox"
        v-if="isShow"
        >
      <div class="toast"
           v-html="mes"
           :class="position"></div>
    </div>
  </transition>
</template>

<script>
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    // 位置
    position: {
      type: String,
      default: "center"
    },
    // 提示文字
    mes: {
      type: String,
      default: ""
    },
    // 是否显示遮罩层
    isShowMask: {
      type: Boolean,
      default: false
    },
    // 显示时间
    time: {
      type: Number,
      default: 2000
    },
    // 是否开启动画
    transition: {
      type: Boolean,
      default: true
    }
  }
};
</script>

<style lang="scss" scoped>
.toast {
  position: fixed;
  left: 50%;
  top: 50%;
  background: rgba(0, 0, 0, 0.85);
  padding: 10px;
  border-radius: 5px;
  color: #fff;
  z-index: 10000;
  transform: translate(-50%, -50%);
}
.fadeIn-enter-active,
.fadeIn-leave-active {
  transition: all 0.2s;
}
.fadeIn-enter,
.fadeIn-leave-active {
  left: 60%;
  opacity: 0;
}
</style>
